<template>
    <div style="display: flex;flex-direction: column; align-items: center; height: 100vh">
        <div style="width: 75%;height: 65%;background-color:bisque;margin-top: 100px;display: flex;justify-content: space-between;">
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;width: 50%;">
                登录页面</div>

            <form @submit.prevent="login">
                <input type="text" placeholder="Username" v-model="username">
                <input type="password" placeholder="Password" v-model="password">
                <button type="submit">Login</button>
            </form>
            <p v-if="error">{{ error }}</p>
        </div>
    </div>
</template>

<script setup>

import { ref } from 'vue'
import axios from 'axios'
// import { useAuthStore } from '../stores/auth'
import { useRouter } from 'vue-router'
const router = useRouter()
// const authStore = useAuthStore()

const username = ref('')
const password = ref('')
const error = ref('')

const login = async () => {
    axios.post('/admin/employee/login', {
        username: username.value,
        password: password.value
    })
        .then(res => {
            console.log(res)
            localStorage.setItem('token', res.data.data.token)
            if (res.data.code === 1) {
                router.push('/')
            }
        })
        .catch(error => {
            console.log(error)
        })

}
</script>

<style scoped>
form {
    margin: auto 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

input {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

button {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

</style>